<template>
  <div class="cinemas">
    <my-head title="影院"></my-head>
    <div class="menu">
      <van-dropdown-menu active-color="#ff5f16">
        <van-dropdown-item :title="area" ref="item">
          <van-grid clickable>
            <van-grid-item
              @click="chooseSome(l, i)"
              v-for="(l, i) in areas"
              :key="i"
            >
              <span :class="area == l ? 'active' : ''"> {{ l }} </span>
            </van-grid-item>
          </van-grid>
        </van-dropdown-item>
        <van-dropdown-item
          @change="changeSort"
          v-model="value"
          :options="option"
        />
      </van-dropdown-menu>
    </div>
    <clist :list="list"></clist>
  </div>
</template>


<script>
//去重和排序
export default {
  data() {
    return {
      list: [],
      areas: [],
      area: "全城",
      value: 0,
      option: [
        { text: "默认排序", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
    };
  },
  methods: {
    arrayUp(a, b) {
      // 升序
      return a["lowPrice"] - b["lowPrice"]; //a.lowPrice-b.lowPrice
    },
    arrayDown(a, b) {
      // 降序
      return b["lowPrice"] - a["lowPrice"]; //a.lowPrice-b.lowPrice
    },
    changeSort(value) {
      if (value == 0) {
        this.list = [...this.cinemaList];
      } else if (value == 1) {
        // 升序
        this.list.sort(this.arrayUp);
      } else if (value == 2) {
        // 降序
        this.list.sort(this.arrayDown);
      }
    },
    chooseSome(l, i) {
      this.area = l;
      if (i == 0) {
        this.list = [...this.cinemaList];
      } else {
        this.list = this.cinemaList.filter((item) => item.districtName == l);
      }
      this.$refs.item.toggle();
    },
    init() {
      var arr = this.cinemaList; // 全部数据
      this.list = [...arr];
      var obj = {};
      var areas = [];
      // 去重
      for (var i = 0; i < arr.length; i++) {
        // obj.江岸区 = true
        if (!obj[arr[i].districtName]) {
          obj[arr[i].districtName] = arr[i].districtName;
          areas.push(arr[i].districtName);
        }
      }
      areas.unshift("全城");
      this.areas = areas;
    },
  },

  mounted() {
    this.checkHasCityInfo(() => {
      // 请求电影影院列表
      // 判断全城电影院列表是否请求
      if (!this.cinemaList.length > 0) {
        this.$ajax
          .getMaiData(
            {
              cityId: this.city.cityId,
            },
            {
              "X-Host": "mall.film-ticket.cinema.list",
            }
          )
          .then((res) => {
            this.changeCinemaList(res.data.cinemas);
            this.init();
          });
      } else {
        this.init();
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.active {
  padding: 5px;
  border: 1px solid #ff5f16;
  color: #ff5f16;
  border-radius: 4px;
}
</style>

